<template>
    <div id="changeapply" class="same-change-oldstyle">
        <div class="changeapplywrap">
            <div class="same-head-box">
                <div class="saem-seat-box">
                    <div class="saem-seat-left">
                        <span>当前位置：</span>
						<el-breadcrumb separator-class="el-icon-arrow-right">
                            <el-breadcrumb-item>水卡管理</el-breadcrumb-item>
                            <el-breadcrumb-item>普通水卡</el-breadcrumb-item>
                            <el-breadcrumb-item :to="{ path: '/virtualCardList' }">水卡列表</el-breadcrumb-item>
                            <el-breadcrumb-item>补卡</el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>
                    <div class="saem-seat-right">
                        <button class="same-search-btns same-search-export" @click="RefreshFun">刷新</button>
                        <button class="same-search-btns" @click="returnBack">返回</button>	 
                    </div>
                </div>
            </div>
            <div style="color:#FF6565;margin-top: 20px;" >注意：只能绑定未使用过的实体卡</div>
            <form action="" method="post" class="formwrap">
                <div class="items">
                    <span class="lable">用户姓名</span>
                    <input type="text" name="full_name" v-model="cardInfo.full_name" disabled="disabled"  placeholder="请输入姓名" />
                    <span class="icons"></span>
                </div>
                <div class="items">
                    <span class="lable">手机号码</span>
                    <input type="number" name="tel" v-model="cardInfo.tel" disabled="disabled"  maxlength="11" placeholder="请输入手机号码" />
                </div>
                <div class="items">
                    <span class="lable">电子卡</span>
                    <input type="text" name="card_number" disabled="disabled" v-model="cardInfo.card" placeholder="请输入电子卡" />
                    <span class="icons"></span>
                </div>
                <div class="items">
                    <span class="lable">卡内余额</span>
                    <input type="text" name="card_number" disabled="disabled" v-model="cardInfo.balance" placeholder="请输入卡内余额" />
                    <span class="icons"></span>
                </div>
                <div class="items">
                    <span class="lable">来源</span>
                    <input type="text" name="card_number" disabled="disabled" v-model="cardInfo.account_name" placeholder="请输入来源" />
                    <span class="icons"></span>
                </div>

                <div class="items">
                    <span class="lable">所属园区</span>
                    <input type="text" name="IDcard" v-model="cardInfo.village_name" disabled="disabled"  placeholder="请输入所属园区" />
                    <span class="icons"></span>
                </div>
                <div class="items">
                    <span class="lable">实体卡号</span>
                    <input type="text" name="IDcard" v-model="sn" placeholder="请输入实体卡号" />
                    <span class="icons"></span>
                </div>
                <button type="button" class="subbtn" @click="submitForm()">提交</button>
            </form>
        </div>
    </div>
</template>
<script>
    import { regionDataPlus } from 'element-china-area-data'
    export default {
        name: 'supplementCard',
        data: function() {
            return {
                options: regionDataPlus,
                cardInfo:[],
                sn:''
            }
        },
        // 初始化运行
        created: function() {
            // this.getProvince(); // 获取省地址
            var card = this.$route.query.card;
            this.getInfo(card);//获取用户信息
        },
        inject: ['reload'],
		methods: {
			RefreshFun(){
				// 调用reload方法，刷新整个页面
				this.reload()
			},
			//返回
			returnBack(){
				this.$router.back(-1);
			},
            getInfo(card){
                var that = this;
                that.$post({
                    url: "Partner/WaterCard/waterCardList",
                    data: {
                        card: card,
                    },
                    success: (data)=> {
                        if (data.code == 1000) {
                            that.cardInfo = data.data.data[0];
                        } else {
                            this.$message({
                                type:'error',
                                showClose: true,
                                message: '请求失败或无数据',
                                center: true
                            });
                        }
                    }
                    //
                })
            },

            // 水卡申请提交
            submitForm() {

                var that = this;
                that.$post({
                    url: 'Partner/WaterCard/reissueCard',
                    data: {sn:that.sn,water_id:that.cardInfo.water_id},
                    success: (data) => {
                        if (data.code == 1000) {
                            this.$message.success('修改成功');
                            that.$router.back(-1);
                        } else {
                            this.$message.error(data.message);
                        }
                    }

                })

            }
        },
        mounted() {

        },
    }

</script>
<style type="text/css" >
    li {
        line-height: normal;
        padding: 7px;
    }

    .name {
        text-overflow: ellipsis;
        overflow: hidden;
    }
    .addr {
        font-size: 12px;
        color: #b4b4b4;
    }

    .highlighted .addr {
        color: #ddd;
    }

    #changeapply .changeapplywrap {
        padding: 0 42px;
    }

    .topBreadcrumb {
        font-size: 16px;
        display: flex;
        align-items: center;
        padding: 30px 0;
        border-bottom: 1px solid #cdcdcd;
    }

    .topBreadcrumb .el-breadcrumb__inner {
        font-size: 16px;
        font-weight: normal;
    }

    #changeapply .items {
        font-size: 14px;
        display: flex;
        align-items: center;
        margin-bottom: 18px;
    }

    #changeapply .items .lable {
        width: 70px;
        font-weight: bold;
    }

    #changeapply .items .icons {
        color: #9e383b;
        margin-left: 13px;
    }

    #changeapply .items input {
        border: 1px solid #cccccc;
        padding: 13px 9px;
        border-radius: 5px;
    }

    #changeapply .formwrap {
        margin-top: 30px;
    }

    #changeapply .formwrap .el-input__inner {
        border: 1px solid #cccccc;
        border-radius: 5px;
        height: 43px;
        font-size: 14px;
        width: 270px;
    }

    #changeapply .itemsbot .el-input__inner {
        border: 1px solid #cccccc;
        border-radius: 5px;
        height: 43px;
        font-size: 14px;
        /* width: 100px !important; */
    }

    #changeapply .itemsbot {
        display: flex;
        align-items: center;
        margin-right: 60px;
    }

    #changeapply .itemsbot input {
        width: 100px !important;
    }

    #changeapply .itemsbot .el-input {
        width: 100px
    }

    #changeapply .itemsbot select {
        border: 1px solid #cccccc;
        padding: 13px 9px;
        border-radius: 5px;
    }

    #changeapply .subbtn {
        background-color: #2c5586;
        border: none;
        border-radius: 5px;
        color: #fff;
        font-weight: bold;
        padding: 13px 25px;
        cursor: pointer;
    }

    #changeapply .el-input__inner {
        height: 43px;
    }

    #changeapply .topBreadcrumb{
      margin-left: 0;
    }
</style>
